<style scoped>
    .photo-root-box{
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        background: #F5F4F4;
        box-sizing: border-box;
        padding:.4rem  .85rem;
    }
    .photo-menu{
        width: 100%;
        text-align: center;
    }
    .photo-menu-item{
        display: inline-block;
        padding: 0 .3rem;
        line-height: .35rem;
        color:#4E4E4E;
        font-size: .16rem;
        margin-right: .35rem;
        cursor: pointer;
    }
    .photo-menu-item.active{
        background: #000;
        color:#fff
    }
    .photo-list-box{
        width: 100%;
        margin-top: .07rem;
    }
    .photo-item{
        float: left;
        margin-left:.3rem;
        margin-top: .4rem;
        width: 4.7rem;
        height: 3.85rem;
        overflow: hidden;
        border-radius:.06rem;
        background: #fff;
        transition: all 0.5s;
        cursor: pointer;
    }
    .photo-item:nth-child(3n+1){
        margin-left: 0;
    }
    .photo-item:hover{
        transform: translateY(-3px);
        box-shadow: 0 0 0.2rem rgba(141,185,244,0.7);
    }
    .photo-item-img-box{
        width: 100%;
        height: 3.12rem;
        overflow: hidden;
        position: relative;
    }
    .photo-item-img-box img{
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .photo-item-inf{
        width: 100%;
        height: .73rem;
        box-sizing: border-box;
        padding-left:.1rem;
        padding-right: .1rem;
    }
    .photo-title{
        float: left;
        line-height: .73rem;
        width: 3.5rem;
        font-weight: bold;
        color:#666;
        font-size: .18rem;
    }
    .photo-time{
        float: right;
        color:#6c6c6c;
        font-weight: bold;
        line-height: .73rem;
        width: .95rem;
    }
    .dig-box{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.7);
        box-sizing: border-box;
        padding-top: .5rem;
    }
    .close-btn{
        width: .2rem;
        height: .2rem;
        background: url("../assets/images/close_icon0.png");
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        right: .2rem;
        top: .2rem;
        cursor: pointer;
    }
    .dig-img{
        width: 100%;
        height: 7rem;
        position: relative;
    }
    .dig-img img{
        height: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .dig-inf{
        width: 80%;
        margin: .5rem  auto;
        margin-bottom: 0;
    }
    .dig-title{
        width: 70%;
        color:#fff;
        font-size: .25rem;
        line-height: .5rem;
        font-weight: bold;
        float: left;
        box-sizing: border-box;
        padding-left: .5rem;
    }
    .dig-time{
        float: right;
        width: 30%;
        text-align: right;
        color:#fff;
        font-size: .18rem;
        line-height: .5rem;
    }
    .dig-text{
        line-height: .25rem;
        color:#fff;
        font-size: .16rem;
        width: 80%;
        margin: 0 auto;
    }
</style>
<template>
    <div class="photo-root-box">
        <ul class="photo-menu clear">
            <li class="photo-menu-item"
                v-for="(item,index) in rootData"
                @click="changeActive(index)"
                v-html="item.name"
                :class="{active:activeNum==index}">
            </li>
        </ul>
        <div class="photo-list-box clear">
            <div class="photo-item" v-for="(item,index) in rootData[activeNum].list" @click="showDig(index)">
                <div class="photo-item-img-box">
                    <img :src="item.img" alt="">
                </div>
                <div class="photo-item-inf clear">
                    <div class="photo-title overflow-dot" v-html="item.title"></div>
                    <div class="photo-time" v-html="item.time"></div>
                </div>
            </div>
        </div>
        <div class="dig-box" v-show="digFlag">
            <div class="close-btn" @click="digFlag=false"></div>
            <div class="dig-img">
                <img :src="digImg" alt="">
            </div>
            <div class="dig-inf clear">
                <div class="dig-title" v-html="digTitle"></div>
                <div class="dig-time" v-html="digTime"></div>
            </div>
            <div class="dig-text" v-html="digText"></div>
        </div>
    </div>
</template>

<script>
    import rootData from '../assets/js/dataConfig'
    export default {
        name: "Photo",
        data(){
            return {
                rootData:rootData.photo,
                activeNum:0,
                digImg:'',
                digTitle:'',
                digTime:'',
                digText:'',
                digFlag:false,
            }
        },
        methods:{
            changeActive(num){
                this.activeNum=num
            },
            showDig(index){
                this.digImg=this.rootData[this.activeNum].list[index].img
                this.digTitle=this.rootData[this.activeNum].list[index].title
                this.digTime=this.rootData[this.activeNum].list[index].time
                this.digText=this.rootData[this.activeNum].list[index].text
                this.digFlag=true
            },
        }
    }
</script>

